import React from 'react'
import ReactDOM from 'react-dom'

function LoginButton (props) {
    return (
        <button onClick={props.onClick}>Login</button>
    )
}
function LogoutButton (props) {
    return (
        <button onClick={props.onClick}>Logout</button>
    )
}

function UserGreeting () {
    return (
        <h1>Welcome back !</h1>
    )
}
function GuestGreeting () {
    return (
        <h1>Please Sign in !</h1>
    )
}

function Greeting (props) {
    const isLogin = props.isLogin
    if (isLogin) {
        return <UserGreeting />
    }
    return <GuestGreeting />
}

class LoginControl extends React.Component {
    constructor(props) {
        super(props)
        this.state = { isLogin: false }
    }

    handlerLoginClick = () => {
        this.setState({ isLogin: true })
    }
    handlerLogoutClick = () => {
        this.setState({ isLogin: false })
    }

    render () {
        const isLogin = this.state.isLogin
        // let button
        // if (isLogin) {
        //     button = <LogoutButton onClick={this.handlerLogoutClick} />
        // } else {
        //     button = <LoginButton onClick={this.handlerLoginClick} />
        // }
        return (
            <div>
                <Greeting isLogin={isLogin} />
                {/* {button} */}
                {isLogin ? <LogoutButton onClick={this.handlerLogoutClick} /> : <LoginButton onClick={this.handlerLoginClick} />}
            </div>
        )
    }
}
ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
)